<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.selectedLi {
				background: #f0ad4e;
				color: #fff;
			}
		</style>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	</head>
	<body>
		<ul class="seetSelect2" id='sysAllSet'>
			　　<li value="1" index='1'>集团考核保障</li>
			　　<li value="2" index='2'>业务全景监控视图</li>
			　　<li value="3" index='3'>专家辅助分析</li>
			　　<li value="4" index='4'>动态基线</li>
			　　<li value="5" index='5'>综合报表</li>
			　　<li value="6" index='6'>告警监控综合管理</li>
			　　<li value="7" inddex='7'>告警分析系统</li>
		</ul>
		<button type="button" class="btn btn-default" id='setTop'>置顶</button>
		<button type="button" class="btn btn-default" id='toTop'>向上</button>
		<button type="button" class="btn btn-default" id='toBottom'>向下</button>
		<button type="button" class="btn btn-default" id='setBottom'>置底</button>
	</body>
</html>
<script type="text/javascript">
	$("#sysAllSet li").click(function() {
		$(".seetSelect2 li").removeClass('selectedLi');
		$(this).addClass('selectedLi');
	});
	$("#sysAllSet li").dblclick(function() { //双击元素 去除样式类名 取消当前选中
		$(this).removeClass('selectedLi');
	});


	//置顶
	$("#setTop").click(function() {
		if ($("#sysAllSet>li").hasClass("selectedLi")) {
			var selLi = $("#sysAllSet>li.selectedLi");
			if (selLi.index() != 0) {
				selLi.fadeOut(10).fadeIn(100);
				$("#sysAllSet").prepend(selLi);
			} else {
				alert("已经置顶啦~");
				return;
			}
		} else {
			return false;
		}
	});

	//置底
	$("#setBottom").click(function() {
		if ($("#sysAllSet>li").hasClass("selectedLi")) {
			var selLi = $("#sysAllSet>li.selectedLi");
			var length = $("#sysAllSet>li").length;
			if (selLi.index() != length - 1) {
				selLi.fadeOut(10).fadeIn(100);
				$("#sysAllSet").append(selLi);
			} else {
				alert("已经置底啦~");
				return;
			};
		} else {
			return false;
		}
	});

	//向上
	$("#toTop").click(function() {
		if ($("#sysAllSet>li").hasClass("selectedLi")) {
			var selLi = $("#sysAllSet>li.selectedLi");
			if (selLi.index() != 0) {
				selLi.fadeOut(10).fadeIn(100);
				selLi.prev().before(selLi);
			} else {
				alert("已经置顶啦~");
				return;
			}
		} else {
			return false;
		}
	});

	//向下
	$("#toBottom").click(function() {
		if ($("#sysAllSet>li").hasClass("selectedLi")) {
			var selLi = $("#sysAllSet>li.selectedLi");
			var length = $("#sysAllSet>li").length;
			if (selLi.index() != length - 1) {
				selLi.fadeOut(10).fadeIn(100);
				selLi.next().after(selLi);
			} else {
				alert("已经置底啦~");
				return;
			}
		} else {
			return false;
		}
	});
</script>
